<template>
  <div class="cinema" :style="{ height: height }">
    <ul>
      <li v-for="item in list" :key="item.cinemaId">
        <div>
          <p class="cinemaName">{{ item.name }}</p>
          <p>{{ item.address }}</p>
        </div>
        <span>
          ￥<i>{{ (item.lowPrice / 100).toFixed(1) }}</i
          >起
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
// 引入better-scroll模块
import BScroll from 'better-scroll'
// 引入全局状态和全局方法
import { mapActions, mapState } from 'vuex'
export default {
  computed: {
    // 引入状态
    ...mapState(['cinemaListState'])
  },
  props: {
    height: {
      type: String,
      default: '200px'
    },
    list: {
      type: Array
    }
  },
  created () {
    // 请求猫眼数据
    // 调用全局函数
    this.cinemaGet()
  },
  methods: {
    // 把全局的异步样式展开
    ...mapActions(['cinemaGet']),
    initBS () {
      this.$nextTick(() => {
        //  一定要在数据回来在初始化
        new BScroll('.cinema', {
          scrollbar: {
            // 这个表示在滑动时候显示进度条 不滑动就不会显示
            fade: true,
            // 禁止监听pc 端鼠标移动事件 false 就可以用鼠标了
            disableMouse: false
          }
        })
      })
    }
  },
  updated () {
    // 元素回来后初始化那个滑动的盒子
    this.initBS()
  }
}
</script>
<style lang='scss' scoped>
.cinema {
  // 滚动条直接在有定位的盒子上使用所以要加定位
  position: relative;
  width: 100%;
  overflow: hidden;
  li {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0.9375rem;
    background: #fff;
    margin-top: 0.125rem;
    font-size: 12px;
    color: #797d82;
    h1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 33;
    }
    .cinemaName {
      font-size: 15px;
      color: #191a1b;
      margin-bottom: 0.3125rem;
    }
    p {
      width: 14rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    span {
      color: #ff5f16;
      font-size: 11px;
      text-overflow: ellipsis;
      i {
        font-size: 15px;
        font-style: normal;
      }
    }
  }
}
</style>
